<template>
  <div class="divRoot">
    <div class="sg-container">
      <ty-row :gutter="16">
        <ty-col :span="8">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="8">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="8">
          <div class="colBox"></div>
        </ty-col>
      </ty-row>
      <div class="mb-10 mt-10">
        <ty-row :gutter="16">
          <ty-col :span="12">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="12">
            <div class="colBox"></div>
          </ty-col>
        </ty-row>
      </div>
      <ty-row :gutter="16">
        <ty-col :span="6">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="6">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="6">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="6">
          <div class="colBox"></div>
        </ty-col>
      </ty-row>
      <div class="mt-10">
        <ty-row :gutter="16">
          <ty-col :span="4">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="4">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="4">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="4">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="4">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="4">
            <div class="colBox"></div>
          </ty-col>
        </ty-row>
      </div>
    </div>

    <div class="sg-container">
      <ty-row :gutter="16">
        <ty-col :span="4">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="6">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="12">
          <div class="colBox"></div>
        </ty-col>
      </ty-row>
      <div class="mb-10 mt-10">
        <ty-row :gutter="16">
          <ty-col :span="10">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="4">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="10">
            <div class="colBox"></div>
          </ty-col>
        </ty-row>
      </div>
      <ty-row :gutter="16">
        <ty-col :span="2">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="10">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="10">
          <div class="colBox"></div>
        </ty-col>
      </ty-row>
    </div>

    <div class="sg-container">
      <div class="mb-10">
        <ty-row :gutter="16">
          <ty-col :span="4" :offset="10">
            <div class="colBox"></div>
          </ty-col>
          <ty-col :span="6" :offset="4">
            <div class="colBox"></div>
          </ty-col>
        </ty-row>
      </div>
      <ty-row :gutter="16">
        <ty-col :span="10" :offset="4">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="4">
          <div class="colBox"></div>
        </ty-col>
        <ty-col :span="6">
          <div class="colBox"></div>
        </ty-col>
      </ty-row>
    </div>

    <div class="sg-container">
      <div class="mb-10">
        <ty-row :gutter="4">
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
            style="margin-bottom: 10px"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
            style="margin-bottom: 10px"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
            style="margin-bottom: 10px"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
            style="margin-bottom: 10px"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
            style="margin-bottom: 10px"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
            style="margin-bottom: 10px"
          >
            <div class="colBox"></div>
          </ty-col>
        </ty-row>
      </div>
    </div>

    <div class="sg-container" style="background-color: deeppink;">
      <div >
        <ty-row :gutter="10">
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
          >
            <div class="colBox"></div>
          </ty-col>
          <ty-col
            :span="{
              xxl: 4,
              xl: 6,
              lg: 8,
              md: 12,
              sm: 24
            }"
          >
            <div class="colBox"></div>
          </ty-col>
        </ty-row>
      </div>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.colBox{
  background-color: var(--primary-6);
  height: 30px;
}
.sg-container{
  margin-top: 30px;
}
</style>
